<template>
  <div class="bottomBar">
    <div class="scroll">
      <el-slider
        v-model="musicDuration"
        :max="totalDuration"
        :format-tooltip="formatTooltip"
        @change="musicDurationChange"
        :disabled="isPlayMusic"
      ></el-slider>
    </div>
    <div class="content">
      <div class="left">
        <div class="singimg">
          <a href="javascript:void(0)" @click.stop="togSingel">
            <div class="s-img">
              <img :src="getMusicDetail.al.picUrl" alt="" />
              <div class="m-img">
                <a href="javascript:void(0)" @click.stop="togSingel">
                  <el-icon color="rgba(255,255,255,0.8)"><arrow-up /></el-icon>
                  <el-icon
                    color="rgba(255,255,255,0.8)"
                    style="position: absolute; top: 12px; left: 10px"
                    ><arrow-up
                  /></el-icon>
                </a>
              </div>
            </div>
          </a>
        </div>
        <div class="sing">
          <div class="sing-title text-full-hidden">
            <span
              >{{ getMusicDetail.name || getMusicDetail.al.name }}-{{
                getMusicDetail.ar[0].name
              }}</span
            >
          </div>
          <div class="sing-time">
            <span>{{ $filters.formatMusicTime(musicDuration * 1000) }}</span
            >/
            <span>{{ $filters.formatMusicTime(getMusicDetail.dt) }}</span>
          </div>
        </div>
        <div class="icon-right">
          <span style="cursor: pointer" @click="addCollect">
            <el-icon v-if="!likeFlag"><star /></el-icon>
            <el-icon v-else><star-filled /></el-icon>
          </span>
        </div>
        <div class="icon-right">
          <span style="cursor: pointer" @click="startDown">
            <el-icon><download /></el-icon>
          </span>
        </div>
        <div class="icon-right">
          <span style="cursor: pointer" @click="togSingel">
            <el-icon><chat-dotSquare /></el-icon>
          </span>
        </div>
        <div class="icon-right">
          <span style="cursor: pointer" @click="togSingel">
            <el-icon><more-filled /></el-icon>
          </span>
        </div>
      </div>
      <div class="play">
        <div class="pre">
          <span style="cursor: pointer" @click="handelPre">
            <el-icon :color="bcColor == '#fff' ? '#717FF9' : bcColor"
              ><caret-left
            /></el-icon>
          </span>
        </div>
        <div class="start">
          <span style="cursor: pointer" @click="handelPause">
            <el-icon
              :color="bcColor == '#fff' ? '#717FF9' : bcColor"
              v-show="!getIsPlay"
              ><video-pause
            /></el-icon>
            <el-icon
              :color="bcColor == '#fff' ? '#717FF9' : bcColor"
              v-show="getIsPlay"
              ><video-play
            /></el-icon>
          </span>
        </div>
        <div class="next">
          <span style="cursor: pointer" @click="handelNext">
            <el-icon :color="bcColor == '#fff' ? '#717FF9' : bcColor"
              ><caret-right
            /></el-icon>
          </span>
        </div>
      </div>
      <div class="more">
        <div style="margin-right: 30px" class="loundBox">
          <a href="#">
            <el-icon :color="bcColor == '#fff' ? '#717FF9' : bcColor"
              ><mic
            /></el-icon>
          </a>
          <div class="lound">
            <el-slider
              v-model="volume"
              vertical
              height="60px"
              size="mini"
              @change="volumeChange"
            ></el-slider>
          </div>
        </div>
        <div class="sure">
          <el-dropdown
            size="small"
            split-button
            type="primary"
            @command="handelCommand"
            trigger="click"
          >
            {{ speeds[currentI] }}
            <template #dropdown>
              <el-dropdown-menu>
                <template v-for="(sp, index) in speeds" :key="sp">
                  <el-dropdown-item :command="{ value: sp, index }">{{
                    sp
                  }}</el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="sure">
          <el-dropdown
            size="small"
            split-button
            type="primary"
            @command="handelChange"
            trigger="click"
          >
            {{ musiceAd[currentIM] }}
            <template #dropdown>
              <el-dropdown-menu>
                <template v-for="(msc, index) in musiceAd" :key="msc">
                  <el-dropdown-item :command="{ value: msc, index }">{{
                    msc
                  }}</el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <!-- <el-button
          type="primary"
          size="small"
          :color="bcColor == '#fff' ? '#717FF9' : bcColor"
        >
          倍速
          <el-icon><arrow-up /></el-icon>
        </el-button> -->
        <!-- <div>
          <a href="#">
            <el-icon class="more-icon"><data-analysis /></el-icon>
          </a>
        </div>
        <div>
          <a href="#">
            <el-icon class="more-icon"><sort /></el-icon>
          </a>
        </div>
        <div>
          <a href="#">
            <el-icon class="more-icon"><notification /></el-icon>
          </a>
        </div>
        <div>
          <span style="cursor: pointer">
            <el-icon class="more-icon"><fold /></el-icon>
          </span>
        </div> -->
      </div>
    </div>
    <audio
      :src="getNowMusic"
      autoplay
      class="playMusicAudio"
      ref="audio"
    ></audio>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import { InitDoing } from '../hook/btom'

export default defineComponent({
  setup() {
    const {
      handelPre,
      handelNext,
      audio,
      isPlayMusic,
      musicDuration,
      totalDuration,
      musicDurationChange,
      formatTooltip,
      togSingel,
      handelPause,
      volumeChange,
      volume,
      gettersMusic,
      bcColor,
      addCollect,
      startDown,
      handelCommand,
      speeds,
      currentI,
      musiceAd,
      currentIM,
      handelChange,
      likeFlag
    } = InitDoing()
    return {
      isPlayMusic,
      musicDuration,
      totalDuration,
      musicDurationChange,
      formatTooltip,
      togSingel,
      volume,
      volumeChange,
      audio,
      handelPause,
      handelPre,
      handelNext,
      ...gettersMusic,
      bcColor,
      addCollect,
      startDown,
      handelCommand,
      speeds,
      currentI,
      musiceAd,
      currentIM,
      handelChange,
      likeFlag
    }
  }
})
</script>
